<!--
 * @Author       : zp
 * @Date         : 2021-07-03 21:12:11
 * @LastEditors  : ly
 * @LastEditTime : 2021-07-09 17:57:10
 * @Description  : 描述
-->
<template>
  <div>
    <a-form-model
      ref="dialogForm"
      :model="dialogForm"
      :rules="rules"
      layout="vertical"
      class="formModel"
    >
      <div class="flex-row">
        <div class="left">
          <a-form-model-item label="账户" prop="account">
            <a-input
              placeholder="请输入账户"
              v-model="dialogForm.account"
              disabled
            />
          </a-form-model-item>
          <a-form-model-item label="姓名" prop="name">
            <a-input
              placeholder="请输入姓名"
              v-model="dialogForm.name"
              disabled
            />
          </a-form-model-item>
          <a-form-model-item label="状态" prop="userEnable">
            <a-input
              placeholder="请输入状态"
              :value="dialogForm.userEnable ? '启用' : '关闭'"
              disabled
            />
          </a-form-model-item>
        </div>
        <div class="upload">
          <div class="avatar-uploader">
            <img :src="dialogForm.headPhotoPath || defalutAvatar" alt="" />
          </div>
          <a-button
            icon="upload"
            @click="handleBtnEvent('editAvatar')"
            class="btn"
          >
            修改头像
          </a-button>
        </div>
      </div>

      <a-form-model-item label="所在部门" prop="departments">
        <a-input
          placeholder="请输入所在部门"
          :value="
            departments ? departments.map((curr) => curr.name).join() : '--'
          "
          disabled
        />
      </a-form-model-item>
      <a-form-model-item label="访问类型" prop="allowAccessTypeName">
        <a-input
          placeholder="请输入访问类型"
          v-model="allowAccessTypeName"
          disabled
        />
      </a-form-model-item>
      <a-form-model-item label="工作职位" prop="position">
        <a-input placeholder="请输入工作职位" v-model="dialogForm.position" />
      </a-form-model-item>
      <a-form-model-item label="地址" prop="address">
        <a-input placeholder="请输入地址" v-model="dialogForm.address" />
      </a-form-model-item>
      <a-form-model-item label="电子邮箱" prop="email">
        <a-input placeholder="请输入电子邮箱" v-model="dialogForm.email" />
      </a-form-model-item>
    </a-form-model>
    <edit-form ref="edit" @reloadData="getUserInfo"></edit-form>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import { validateRule, isPhone } from '@/utils/validate'
  import { queryUserByID } from '@/services/login/auth'
  import { updateUser } from '@/services/access/user'
  export default {
    components: {
      EditForm: () => import('../EditForm.vue'),
    },
    data() {
      return {
        dialogForm: {
          name: undefined,
          account: undefined,
        },
        rules: {
          cellPhone: validateRule(true, '', 'blur', '请输入手机号'),
          email: validateRule(false, 'isEmail', 'blur', '请输入手机号'),
        },
        defalutAvatar: require('@/assets/img/defaultAdmin.png'),
        departments: undefined,
      }
    },

    computed: {
      ...mapGetters('account', ['user']),
      mobile() {
        return this.dialogForm.cellPhone
      },
      allowAccessTypeName() {
        let typeName
        switch (this.dialogForm.allowAccessType) {
          case 0:
            typeName = '所有访问方式'
            break
          case 1:
            typeName = '安卓用户'
            break
          case 2:
            typeName = 'web用户'
            break
          case 4:
            typeName = '桌面用户'
            break
          case 8:
            typeName = 'ios用户'
            break
          default:
            break
        }
        return typeName
      },
    },
    watch: {
      mobile(value) {
        if (isPhone(value)) {
          this.disabled = false
        } else {
          this.disabled = true
        }
      },
    },
    mounted() {
      console.log('更新了---------')
      this.getUserInfo()
    },
    methods: {
      getUserInfo() {
        const companyID = this.user.companyID
        const userID = this.user.subjectID
        queryUserByID({ companyID, userID }).then((res) => {
          this.dialogForm = res.data.user
          this.departments = res.data.departments
        })
      },

      // rowData, visible
      onSubmit(rowData) {
        console.log(rowData)
        this.$refs.dialogForm.validate((valid) => {
          if (valid) {
            const companyID = this.user.companyID
            const strategyID = rowData.id
            this.dialogForm.cellPhone = null
            this.dialogForm.headPhotoPath = null
            const params = Object.assign({}, this.dialogForm, {
              companyID,
              strategyID,
            })
            updateUser(params).then((res) => {
              this.$message.success(res.msg || '用户信息更新成功')
              this.$emit('close-modal')
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },

      resetForm() {
        this.$refs.dialogForm.resetFields()
        this.dialogForm = this.$options.data().dialogForm
        return false
      },
      handleBtnEvent(operateType, rowData = [], isFooter = 1) {
        this.$refs.edit.showModal(operateType, rowData, isFooter)
      },
    },
  }
</script>
<style lang="less" scoped>
  .code-container {
    /deep/ .ant-form-item-children {
      display: flex;
      input {
        margin-right: 10px;
      }
    }
  }
  .formModel {
    /deep/ .ant-form-item {
      margin-bottom: 10px;
    }
  }

  .flex-row {
    display: flex;
    .left {
      flex-grow: 1;
    }
    .upload {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 200px;
      padding-top: 20px;
      .avatar-uploader {
        width: 140px;
        height: 140px;
        margin-bottom: 10px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .btn {
        width: 140px;
      }
    }
  }
</style>
